<template>
	<view class="content">
		<view class="gov-title">延边朝鲜族自治州委政法委</view>
		<image class="logo" src="/static/logo.jpg"></image>
		<view class="button-background">

			<view class="image-container" @click="x1()">
				<image class="button-image" src="/static/images/button2.png"></image>
				<view class="text-overlay">涉黑涉恶线索举报通道</view>
			</view>

			<view class="image-container" @click="x2()">
				<image class="button-image" src="/static/images/button1.png"></image>
				<view class="text-overlay">涉法涉诉线索举报通道</view>
			</view>
			<view class="image-container" @click="x3()">
				<image class="button-image" src="/static/images/button2.png"></image>
				<view class="text-overlay">干警违纪违法线索举报通道</view>
			</view>
			<view class="image-container" @click="x4()">
				<image class="button-image" src="/static/images/button1.png"></image>
				<view class="text-overlay">反邪教组织线索举报通道</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				pid: 2789,
				globalConfig: getApp().globalData.config,
				userInfo: {}, // 使用对象而不是数组来存储用户信息  

				list: [], // 用于存储查询到的用户列表（如果有需要）  
				loginForm: {
					username: "",
					password: "",
					openId: ""
				},
			};
		},
		onLoad() {
			
		}, 
		methods: {
			x1() {
				uni.navigateTo({
					url: '/pages/work/shse/index'
				})
			},
			x2() {
				uni.navigateTo({
					url: '/pages/work/sfss/index'
				})
			},
			x3() {
				uni.navigateTo({
					url: '/pages/work/gjwj/index'
				})
			},
			x4() {
				uni.navigateTo({
					url: `/pages/work/fxj/index`
				})
			},			

		}
	};
</script>

<style>
	/* .content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	} */

	.logo {
		height: 210px;
		width: 100%;
		/* margin-top: 200rpx; */
		/* margin-left: auto; */
		/* margin-right: auto; */
		/* 	margin-bottom: 50rpx; */
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.sb {
		/* padding: 10px; */
		/* top: 100px; */
		width: 100%;
		height: 45px;
		/* top: -4px; */
		color: rgba(80, 80, 80, 1);
		background-color: rgba(51, 103, 153, 1);
		font-size: 18px;
		line-height: center;
		text-align: center;
		flex-direction: column;
		/* 设置为列方向布局 */
		/* align-items: center; */
		/* 垂直居中 */
		/* justify-content: center; */
		/* 水平居中（但在这里我们主要关心垂直居中，所以可能需要调整） */
	}

	.image_11X1 {
		width: 30px;
		height: 30px;
		margin-right: 15px;
		top: 10px;
	}

	.text_148X1 {
		margin-top: -10%;
		width: auto;
		height: 33px;
		left: 51px;
		top: 55px;
		color: rgba(255, 255, 255, 1);
		text-shadow: rgba(0, 0, 0, 0.5) 0px 2px 2px;
		font-size: 18px;
		line-height: 150%;
		text-align: left;
		font-weight: bold;
		padding-right: 80px;
	}



	.text_12X1 {
		width: 246px;
		height: 60px;
		/* left: 84px; */
		/* top: 100px; */
		color: rgba(255, 255, 255, 1);
		/* background-color: rgba(51, 103, 153, 1); */
		border-radius: 16px;
		font-size: 18px;
		line-height: center;
		box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.5);
		text-align: center;
		font-weight: bold;
		margin-bottom: 35px;
	}


	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		/* 根据需要调整 */
	}

	.image-container {
		/* width: 100%; */
		/* 根据图片尺寸调整 */
		/* height: 100px; */
		/* 根据图片尺寸调整 */
		/* margin: 0 50px; */
		position: relative;
		width: 100%;
		height: 70px;
		margin-bottom: 0px;
		padding: 0px 20px;
		align: center;
		margin: 20px 0px;
	}

	.button-image {
		/* width: 100%; */
		height: 100%;
		border-radius: 8px;
		font-size: 18px;
		line-height: center;
		box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.5);
		text-align: center;
		font-weight: bold;
	}

	.text-overlay {
		font-family: '微软雅黑';
		font-weight: bold;
		position: absolute;

		top: 50%;
		/* 垂直居中 */
		left: 39%;
		/* 水平居中 */
		transform: translate(-50%, -50%);
		/* 修正位置 */
		color: white;
		/* 根据图片背景调整文字颜色 */
		font-size: 18px;
		/* 根据需要调整文字大小 */
		text-align: center;
		/* 文字居中，虽然在这个场景下可能不需要，因为已经通过 transform 居中了 */
		width: 100%;
		/* 确保文字覆盖整个图片宽度，但在这个布局中它实际上不会影响布局，因为已经通过 position: absolute 定位了 */
		pointer-events: none;
		/* 确保文字不会阻挡点击事件传递到下面的图片 */
	}

	image {
		/* max-width: 100%; */
		display: inline-block;
		position: relative;
		z-index: 0;
		width: 100%;
	}

	.overlay-image {
		position: absolute;
		/* 绝对定位 */
		top: 10px;
		/* 根据需要调整位置 */
		right: 10px;
		/* 根据需要调整位置 */
		width: auto;
		/* 保持图片原始宽高比 */
		height: auto;
		/* 保持图片原始宽高比 */
		pointer-events: auto;
		/* 确保点击事件针对此图片 */
	}

	.floating-view {
		color: white;
		font-size: 15px;
		font-weight: bold;
		position: fixed;
		/* 固定定位 */
		top: 20px;
		/* 距离屏幕顶部0px */
		left: 20px;
		/* 距离屏幕左侧0px（可以根据需要调整） */
		width: 100%;
		/* 宽度可以根据需要调整，比如设置为某个具体值或百分比 */
		/* 背景色（可选） */
		padding: 10px;
		/* 内边距（可选） */

		z-index: 9999;
		/* 确保悬浮视图在其他内容之上 */
	}

	.gov-title {
		display: flex;
		/* justify-content: center; */
		align-items: center;
		color: white;
		font-family: '宋体';
		font-size: 16px;
		font-weight: bold;
		padding: 0px 20px;
		height: 40px;
		width: 100%;
		background-color: #4f91c6;
		text-align: left;
	}

	.button-background {
		margin: 5px 10px;
		background-color: #ebf8ff;
		/* height: 100%; */
		padding: 10px 0px;
		border-radius: 12px;
	}

	loginbtn {
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 9999;
		opacity: 0;
	}
</style>